<template>
    <div>
        <div class="class-container">
            <div style="height: 1rem;">
                <div class="classtitle" style="height: 1rem;">
                    <img src="@/assets/images/全部分类.jpg" alt="" class="classtitleimg">
                    <a href="#" class="details">
                        <img src="@/assets/images/搜索.png" alt="" class="classserchimg">
                    </a>
                </div>
            </div>
            
            <!-- <el-container> -->
                <div style="height: .6rem">
                    <div class="classNav">
                        <el-header>
                            <el-menu :default-active="$route.path"
                                    class="nav-menu"
                                    mode="horizontal"
                                    :router="true"
                                    background-color="#000000"
                                    text-color="#fff"
                                    active-text-color="#c47d2f">
                                <el-menu-item :index="item.path" v-for="item in menuList" :key="item.id">{{item.name}}</el-menu-item>
                            </el-menu>
                        </el-header>
                    </div>
                </div>
                <!-- 分类组件显示 -->
                <router-view></router-view>
            <!-- </el-container> -->
        </div>
        <div class="seat"></div>
        <Nav></Nav>
    </div>
</template>

<script>

import Nav from '@/components/pub/Nav.vue'

export default {
    name: 'WorkspaceJsonClass',

    data() {
        return {
            menuList: [
                {
                id: '1',
                name: '风格',
                path: '/class/style'
                },
                {
                id: '2',
                name: '题材',
                path: '/class/theme'
                },
                {
                id: '3',
                name: '国家',
                path: '/class/country'
                },
                {
                id: '4',
                name: '画家',
                path: '/class/painter'
                }
            ],

        };
    },
    components: {
        Nav,
    },
    methods: {

    },
    watch: {
        '$route'(){
            //页面发生变化时初始化类别选项
            this.categoryRadio = 1
            this.orderByColumn = 'releaseDate'
        }
    },
    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style scoped>
@import  '@/assets/css/class/class.min.css'
</style>